<template>
  <div class="container">
    <headerBar :title="local.stockDetail" @changeLan="changeLan"></headerBar>
    <div class="all">
      <div class="top">
        <div class="select-panel">
          <div class="panel-goods">
            <div class="name">{{local.supplier}}：</div>
            <div class="names-goods">{{obj.supplierName}} ({{obj.supplierCode}})</div>
          </div>
          <div class="panel-goods">
            <div class="name">{{local.buyArea}}：</div>
            <div class="names-goods">{{obj.buyAreaName||''}}</div>
          </div>
          <div class="panel-goods">
            <div class="name">{{local.goodsName}}：</div>
            <div class="names-goods">{{obj.goodsName}}</div>
          </div>
          <div class="panel-goods">
            <div class="name">{{local.warehouseName}}：</div>
            <div class="names-goods">{{obj.warehouseName}}</div>
          </div>
          <div class="panel-goods">
            <div class="name">{{local.storageTime}}：</div>
            <div class="names-goods">{{createTimeFormat}}</div>
          </div>
        </div>
      </div>
      <div class="select-photo">
        <div class="a">{{local.photosBeforeAcceptance}}</div>
        <div class="b">
          <div class="page">
            <div class="weui-uploader__bd">
              <div class="weui-uploader__files" id="uploaderFiles">
                <block v-for="(item, index) in obj.beginPicUrlList" :key="index">
                  <div class="weui-uploader__file" @click="predivImage" :id="IMG+item">
                    <img class="weui-uploader__img" :src="IMG+item" mode="aspectFill" />
                  </div>
                </block>
              </div>
              <!--<div class="weui-uploader__input-box">-->
              <!--<div class="weui-uploader__input" @click="chooseImage"></div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="stock-detail-panel">
        <div class="stock-detail-belt">
          <span class="name">{{local.beltType}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <picker
              class="weui-btn"
              @change="PickerChange"
              disabled
              :range="arrayBelt"
              :index="indexBeltPicker"
              :range-key="'dictLabel'"
            >
              <input type="default" v-model="beltTypeName" disabled placeholder="选项" />
              <span class="unit">▼</span>
            </picker>
          </div>
        </div>
        <div class="msg-detail-grade">
          <span class="name">{{local.grade}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <picker
              class="weui-btn"
              @change="PickerChange"
              disabled
              :range="arrayLevel"
              :index="indexLevelPicker"
              :range-key="'dictLabel'"
            >
              <input type="default" disabled v-model="goodsLevelName" placeholder="选项" />
              <span class="unit">▼</span>
            </picker>
          </div>
        </div>
        <div class="msg-detail-thickness">
          <span class="name">{{local.thickness}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <input placeholder="请输入厚度" v-model="obj.sizeHeight" disabled />
            <span class="unit">MM</span>
          </div>
        </div>
        <div class="msg-detail-width">
          <span class="name">{{local.width}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <input placeholder="请输入宽度" v-model="obj.sizeWidth" disabled />
            <span class="unit">MM</span>
          </div>
        </div>
        <div class="msg-detail-long">
          <span class="name">{{local.length}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <input placeholder="请输入长度" v-model="obj.sizeLong" disabled />
            <span class="unit">M</span>
          </div>
        </div>
        <div class="msg-detail-long">
          <span class="name">{{local.weight}}：</span>
          <div class style="border-bottom: 2rpx solid;">
            <input placeholder="请输入重量" v-model="obj.weight" disabled />
            <span class="unit">T</span>
          </div>
        </div>
      </div>
      <div class="select-photo">
        <div class="a">{{local.photosAfterAcceptance}}</div>
        <div class="b">
          <div class="page">
            <div class="weui-uploader__bd">
              <div class="weui-uploader__files" id="uploaderFiles">
                <block v-for="(item,index) in obj.endPicUrlList" :key="index">
                  <div class="weui-uploader__file" @click="predivImageEnd" :id="IMG+item">
                    <img class="weui-uploader__img" :src="IMG+item" mode="aspectFill" />
                  </div>
                </block>
              </div>
              <!--<div class="weui-uploader__input-box">-->
              <!--<div class="weui-uploader__input" @click="chooseImage"></div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Shop from "../../../../config/shop"
  import { dictMatching } from '@/utils/index'
  import home from '@/api/home'
  import card from '@/components/card'
  import headerBar from "@/components/headerBar"
  export default {
    components: {
      card,
      headerBar
    },
  computed: {
    createTimeFormat(){
      return wx.$timeFormat(this.obj.createTime) // new Date(this.obj.createTime).$format('dd/MM/yyyy')
    },
  },
    methods: {
      initLang(){
        this.local = wx.getStorageSync('local')
        this.lang = wx.getStorageSync('lang')
      },
      changeLan(val) {
        this.local = val
      },
      PickerChange (e) {
      },
      routerToUrl (url) {
        wx.navigateTo({
          url
        })
      },
      chooseImage (e) {
        var _this = this
        wx.chooseImage({
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            _this.files = _this.files.concat(res.tempFilePaths)
          }
        })
      },
      predivImage(e) {
        const that = this
        let filesStartArr = []
        that.obj.beginPicUrlList.map(item => {
          filesStartArr.push(`${Shop.IMG_URL}${item}`)
        })
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: filesStartArr, // 需要预览的图片http链接列表
        })
      },
      predivImageEnd(e) {
        const that = this
        let filesStartArr = []
        that.obj.endPicUrlList.map(item => {
          filesStartArr.push(`${Shop.IMG_URL}${item}`)
        })
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: filesStartArr, // 需要预览的图片http链接列表
        })
      },
      async getLogGoodsWareDetail (id) {
        const data = await home.getLogGoodsWareDetail({id: id})
        this.obj = data
        this.processingData()
      },
      // 处理数据
      processingData () {
        this.obj.beginPicUrlList = this.obj.beginPicUrl.split(',')
        this.obj.endPicUrlList = this.obj.endPicUrl.split(',')
        this.beltTypeName = dictMatching(wx.getStorageSync('beltType') || [], this.obj.beltType)
        this.goodsLevelName = dictMatching(wx.getStorageSync('goodsLevel') || [], this.obj.goodsLevel)
        this.obj.createTime = this.obj.createTime.substring(0,10)
      }
    },
    data () {
      return {
        IMG: Shop.BASE_URL,
        lang: wx.getStorageSync('lang'),
        local: wx.getStorageSync("local"),
        files: [],
        indexPicker: 1,
        indexBeltPicker: 0,
        indexLevelPicker: 0,
        arrayBelt: [],
        arrayLevel: [],
        array: ['美国', '中国', '巴西', '日本'],
        logs: [],
        fileList: [],
        obj: {},
        beltTypeName: '',
        goodsLevelName: ''
      }
    },
    onLoad (options) {
      this.initLang()
      this.getLogGoodsWareDetail(options.id)
    },
    created () {
    }
  }
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
